<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<title>Deployment Results</title> 
 	
 	<!--For Flot -->
 	<link href="layout.css" rel="stylesheet" type="text/css"></link>
    <!--[if IE]><script language="javascript" type="text/javascript" src="../../flot/excanvas.min.js"></script>
	<![endif]-->
    <script language="javascript" type="text/javascript" src="../../flot/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../../flot/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="../../scripts/autoBreadcrumbs.js"></script>

	<!--Initialize Google Maps API with my API key--> 
	<script
		src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAsZnz0FcWblQv-IlMKMLCyxT17Yenz1aIVr__ncDvx7XC4g-EqBQ-qToz-rHyaPkLaUAXyux4-Z6RNA"
		type="text/javascript"></script>

	</head>

<body onunload="GUnload()" bgcolor="#A5BDE6"> 

<table cellpadding="0" cellspacing="0" width="1216" height="59">
	<!-- MSTableType="layout" -->
	<tr>
		<td height="59" width="1216">
		<p align="center"><i><b><font size="5" color="#000066" face="Verdana">
		AIR QUALITY SENSOR NETWORK</font>
		<font size="3" color="#000066" face="Verdana">
		<div id="navbar" align=center></div></font></b></i>
		</td>
		
	</tr>
</table>
<table cellpadding="0" cellspacing="0" width="1215" height="648">
	<!-- MSTableType="layout" -->
	<tr>
	<td valign="top" rowspan="2">
	<p align="left"><u><b><font face="Verdana" style="font-size: 11pt">Project 
	Sites</font></b></u><p align="left"><b><font face="Verdana" size="2">
	<a href="http://wireless.ece.drexel.edu/air_quality" style="text-decoration: none">Home Page</a></font></b><p align="left">
	<b><font face="Verdana" size="2">
	<a href="../../project%20files/Sensor%20Network%20Fact%20Sheet.pdf" style="text-decoration: none">
	Quick Facts Sheet</a></font></b><p align="left"><b>
	<font face="Verdana" size="2">
	<a href="../../information.htm" style="text-decoration: none">Project Information</a></font></b></p>
	<p align="left"><b><font face="Verdana" size="2">
	<a href="../../understanding_results.htm" style="text-decoration: none">Understanding Results</a></font></b></p>
	<p align="left">&nbsp;</p>
	<p align="left"><u><b><font face="Verdana" style="font-size: 11pt">Related 
	Sites</font></b></u></p>
	<p align="left"><b><font face="Verdana" size="2">
	<a style="text-decoration: none" target="_blank" href="http://www.cleanair.org/">Clean Air Council</a></font></b></p>
	<p align="left"><b><font face="Verdana" size="2">
	<a target="_blank" href="http://www.phila.gov/health/units/ams/" style="text-decoration: none">Air Management <br>Services 
	(AMS)</a></font></b></p>
	<p align="left"><b><font face="Verdana" size="2">
	<a style="text-decoration: none" target="_blank" href="http://www.airnow.gov">
	AIRNow.gov</a></font></b><p align="left"><b><font face="Verdana" size="2">
	<a target="_blank" href="http://www.dylosproducts.com/" style="text-decoration: none">
	Dylos Products</a></font></b></td>
	<td valign="top">
		<div id="placeholder" style="width:818px;height:195px;" align="center"></div>
	</td>
	<td valign="top" height="195">
		<div id="legend" align="top"></div>

	</td>
	</tr>
	<tr>
		<td valign="top">
			<div id="map" style="width:818px;height:390px;" align="center"></div>
		</td>
	<td valign="top" height="390">
	<div id="side_bar" align="center"></div>
	</td>
	</tr>
	<tr>
		<td width="194">&nbsp;</td>
		<td valign="center" width="818">
		<p id="messageData"> <span id="message"></span></p>
		</td>
		<td height="28" width="203" valign="top">&nbsp;</td>
	</tr>
	<tr>
		<td valign="top" colspan="3" height="35">
		<p align="center"><font face="Verdana"><small><font size="1">
		<a href="mailto:drexelece01sd@gmail.com?subject=Air Quality Website">Questions 
		or Comments</a></span></span></td>
	</tr>
	</table>

		
	<script type="text/javascript">
	<!--
	  breadcrumbs()
	//-->
	</script>
	
	<script type="text/javascript">
	<!--
	  // Map Variables
	var map;			//map canvas
	var gmap;			//actual map
	var popup_html;
	var counter = 0;
	var gmarkers = [];
	var centerCoords = null;
	
	// Chart Variables
	var placeholder;
	var plot;
	var data = [];
	var data1 = [];
	var markings;
	var options;
	var previousPoint = null;
	var showPM25 = true;
	
	// Variables for both Map & Chart
	var side_bar_html;
	var activeNodes = [];
	var lastTimestamp;
	var lastDataPoint;
	var last25Value;
	var last10Value;
	var aqi;
	
	//==================================
	
	if (GBrowserIsCompatible()) {
	
		// map locations for drawing map and chart to html file
		map = document.getElementById("map");
		placeholder = document.getElementById("placeholder");
		
		//initialize map
		gmap = new GMap2(map);
		gmap.addControl( new GScaleControl());
		gmap.addControl(new GLargeMapControl3D());
		gmap.addControl( new GMapTypeControl()) ;		
		gmap.setCenter(new GLatLng(39.952335, -75.163789), 13);
		
		
		//initialize side_bar html
		side_bar_html = "<b>Click to view sensor data:</b><br><br>";
		side_bar_html += '<a href="javascript:initializeChart()">All Nodes<\/a><br>';
		
		//lookup node coords and plot on map
		getNodeLocations();
		updateSidepanel();
		
		//initialize chart
		setChartConfigs(true);
		plot = $.plot(placeholder, data, options);
		initializeChart();
			
		//setup action for when mouse hovers over plot
		$("#placeholder").bind("plothover", function (event, pos, item) {
			$("#x").text(pos.x);
			$("#y").text(pos.y.toFixed(2));
	 
			if (item) {
				if (previousPoint != item.datapoint) {
					previousPoint = item.datapoint;
					
					$("#tooltip").remove();
					var x = item.datapoint[0],
						y = item.datapoint[1].toFixed(2);
				 
					x = convertTime(x);
					
					showTooltip(item.pageX, item.pageY,"Timestamp: "+x+"<br>PM Concentration: "+y+" &micro;g/m<sup>3</sup>");
				}
			}
			else {
				$("#tooltip").remove();
				previousPoint = null;            
			}
			
		});
		
				
	//===========Map Plotting Functions===========================		
		
		function getNodeLocations() {
			/*GDownloadUrl("points.json", function(data, responseCode) { 
				parseJson(data);
			});*/
				$.ajax({
					url: "points.json", 		//url: "N1_data10.json",
					method: 'GET',
					async: false,
					dataType: 'json',
					success: pointsReceived
				});
				
				$.ajax({
					url: "points1.json", 		//url: "N1_data10.json",
					method: 'GET',
					async: false,
					dataType: 'json',
					success: pointsReceived
				});
		}
		
		//for each node in json file, create map marker
		function pointsReceived(series) {
			for (var i = 0; i < series.markers.length; i++) {
				var marker = createMarker(series.markers[i]);
				gmap.addOverlay(marker);
			}	
		}
							
		function createMarker(input) {
			
			//center the map on 1st node's coords
			if (centerCoords == null) {
				centerCoords = input.point;
				gmap.setCenter(centerCoords, 16);
			}
			
			//assign appropriate image to each node
			var markerImage = "../../images/marker"+input.num+".png";
			var marker = new GMarker(input.point, makeIcon(markerImage));						
			
			//add each node to list
			activeNodes.push(input.num);
			
			// Listener for marker clicks			
			GEvent.addListener(marker, "click", function() {
				
				//update graph with correct node's data
				changeGraph(input.num,true);

				//assign correct color status
				var img;
				if (last25Value >= 250.5) {
					img = "../../images/maroon_status_bar.png";
				}else if (last25Value >= 150.5) {
					img = "../../images/purple_status_bar.png";
				}else if (last25Value >= 65.5) {
					img = "../../images/red_status_bar.png";
				}else if (last25Value >= 35) {
					img = "../../images/orange_status_bar.png";
				}else if (last25Value >= 15.5) {
					img = "../../images/yellow_status_bar.png";
				}else {
					img = "../../images/green_status_bar.png";
				}
				
				aqi = AQIPM25(last25Value);
				
				//generate correct html to display in info window
				var tabs_array	= [ new GInfoWindowTab("Information", formatTabOne(input,img) ),
								new GInfoWindowTab("Downloads", formatTabTwo(input) ) ];
				
				//open info window
				marker.openInfoWindowTabsHtml(tabs_array);
			});
			
			//update right side links panel with marker mapping		
			gmarkers.push(marker);
			side_bar_html += '<a href="javascript:myclick(' + (counter) + ')">Node #' + input.num + '<\/a><br>';
			counter = counter+1;
			updateSidepanel();
			
			//return marker for adding to map
			return marker;
		}
		
		function makeIcon (image) {
			var icon = new GIcon(G_DEFAULT_ICON);
			icon.image = image;
			return icon;
		}
		
		function formatTabOne (input,img) {	
			var html = '<b><font size="4" align="center">Node #'+input.num+' Air Quality</font></b>\
					<br align="center"><img src='+img+'>\
					<p align="left"><b align="left"><u align="left">Most Recent Measurements:</u></b>\
					<br><a href="http://www.airnow.gov/index.cfm?action=aqibasics.particle" target="_blank">PM<sub>2.5 </sub>:</a>\
					&nbsp;'+last25Value+'&nbsp; &micro;g/m<sup>3</sup>\
					<br><a href="http://www.airnow.gov/index.cfm?action=aqibasics.particle" target="_blank">PM<sub>10</sub> :</a>\
					&nbsp;'+last10Value+'&nbsp; &micro;g/m<sup>3</sup>\
					<br><a href="http://www.airnow.gov/index.cfm?action=aqibasics.aqi" target="_blank">AQI :</a>&nbsp;&nbsp;&nbsp;&nbsp;'+aqi+'\
					<p align="center"><a href="javascript:changeGraph('+(input.num)+","+(true)+')"><img src="../../images/button1.jpg" width="115" height="23"></a>&nbsp;&nbsp;&nbsp;\
					<a href="javascript:changeGraph('+(input.num)+","+(false)+')"><img src="../../images/button2.jpg" width="115" height="23"></a>';
			
			return html;			
		}
		
		function formatTabTwo (input) {
			var html = '<b><font size="4" align=center">Download Options:</font></b>\
					<p align="left"><br align="left"><a href="deployment_data.csv">Download Data for All Nodes</a>';	
			return html;	
		}
						
		function myclick(i) {
			GEvent.trigger(gmarkers[i], "click");
		}

		function updateSidepanel() {
			document.getElementById("side_bar").innerHTML = side_bar_html;
		}
		
	//===========Chart Plotting Functions===========================		
			
		function setChartConfigs(pm25) {
			if (pm25 == true) { //configure for pm2.5 chart
			
				//background colors and threshold line
				markings = [
					{ color: '#C49EA9', yaxis: { from: 250.5 } },
					{ color: '#DFB1C8', yaxis: { from: 150.5, to: 250.5 } },
					{ color: '#FEB1B1', yaxis: { from: 65.5, to: 150.5 } },
					{ color: '#FECA98', yaxis: { from: 35, to: 65.5 } },
					{ color: '#FEFEB1', yaxis: { from: 15.5, to: 35 } },
					{ color: '#B1F6B1', yaxis: { from: 0, to: 15.5 } },
					{ color: '#990000', lineWidth: 3, yaxis: { from: 35, to: 35 } }];
					
				//display options	
				options = {
					lines: { show: true },
					points: { show: true, radius: 1.5 },
					xaxis: { mode: "time", timeformat: "%m/%d/%y, %H:%M%p" },
					yaxis: { min: 0},
					legend: { position: "nw", container: legend },
					grid: { markings: markings, hoverable: true }};
					
			}else { //configure for pm10 chart
			
				//background colors and threshold line
				markings = [
					{ color: '#C49EA9', yaxis: { from: 425 } },
					{ color: '#DFB1C8', yaxis: { from: 355, to: 425 } },
					{ color: '#FEB1B1', yaxis: { from: 255, to: 355 } },
					{ color: '#FECA98', yaxis: { from: 150, to: 255 } },
					{ color: '#FEFEB1', yaxis: { from: 55, to: 150 } },
					{ color: '#B1F6B1', yaxis: { from: 0, to: 55 } },
					{ color: '#990000', lineWidth: 3, yaxis: { from: 150, to: 150 } }];
				
				//display options	
				options = {
					lines: { show: true },
					points: { show: true, radius: 1.5 },
					xaxis: { mode: "time", timeformat: "%m/%d/%y, %H:%M%p" },
					yaxis: { min: 0},
					legend: { position: "nw", container: legend },
					grid: { markings: markings, hoverable: true }};
			}
		}
		
		function initializeChart() {
			//initialize chart with pm2.5 data from all active nodes	
			data = [];
			showPM25 = true;
			gmap.closeInfoWindow();
			for (var i = 0; i < activeNodes.length; i++) {
				fetchChartData(activeNodes[i]);
			}
		}
		
		function fetchChartData(nodeNum){
			// read in PM2.5 data from file
			file = "N"+nodeNum+"_data25.json";
			$.ajax({
				url: file, 		//url: "N1_data10.json",
				method: 'GET',
				async: false,
				dataType: 'json',
				success: onDataReceived
			});
			//read in PM10 data
			file = "N"+nodeNum+"_data10.json";
			$.ajax({
				url: file, 		//url: "N1_data10.json",
				method: 'GET',
				async: false,
				dataType: 'json',
				success: onDataReceived1
			});
		}
		
		function onDataReceived(series) {
			last25Value = series.data[series.data.length-1][1].toFixed(4);
			data.push(series);
			if (showPM25 == true){
				setChartConfigs(true);
				$.plot(placeholder, data, options);
				$("#message").text("Currently Viewing PM2.5 Chart.");
			}
		}
		
		function onDataReceived1(series) {
			last10Value = series.data[series.data.length-1][1].toFixed(4);
			data1.push(series);
			if (showPM25 == false){
				setChartConfigs(false);
				$.plot(placeholder, data1, options);
				$("#message").text("Currently Viewing PM10 Chart.");
			}
		}
	
		function showTooltip(x, y, contents) {
			$('<div id="tooltip">' + contents + '</div>').css( {
				position: 'absolute',
				display: 'none',
				top: y - 55,
				left: x,
				border: '1px solid #fdd',
				padding: '2px',
				'background-color': '#fee',
				opacity: 0.80
			}).appendTo("body").fadeIn(200);
		}
	 
		function convertTime(timeStamp){
			var ts=new Date(timeStamp);
			var m = ts.getUTCMonth()+1;
			var d = padOs(ts.getUTCDate());
			var y = ts.getUTCFullYear();
			var h = padOs(ts.getUTCHours());
			var min = padOs(ts.getUTCMinutes());
			var s = padOs(ts.getUTCSeconds());
			
			function padOs(i) {
			  if (i<10) {
				i="0" + i;
			  }
			  return i;
			}

			var rv = m+ "/" +d+ "/" +y+ " " +h+ ":" +min+ ":" +s;
			return rv;
		}
		
		function changeGraph(nodeNum,bool){
			showPM25 = bool;
			data = [];
			data1 = [];
			last25Value = null;
			last10Value = null;
			fetchChartData(nodeNum);
			file = "N"+nodeNum+"_data25.json";
		
			GDownloadUrl(file, function(data, responseCode) { 
				getLastValues(data);
			});
			
		}
		
		function getLastValues (doc) {
			
			var jsonData = eval("(" + doc + ")")
			var input = jsonData.data;
			var lv = input[input.length-1][1];
			return lv;
		
		}
		
		function Linear(AQIhigh, AQIlow, Conchigh, Conclow, Concentration){
			
			var linear;
			var Conc=parseFloat(Concentration);
			var a;
			 
			a=((Conc-Conclow)/(Conchigh-Conclow))*(AQIhigh-AQIlow)+AQIlow;
			linear=Math.round(a);
			return linear;
		 }
		
		function AQIPM25(Concentration){
		 
			var Conc=parseFloat(Concentration);
			var c;
			var AQI;
		 
			c=(Math.round(10*Conc))/10;
		 
			if (c>=0 && c<15.5){
				AQI=Linear(50,0,15.4,0,c);
			}
			else if (c>=15.5 && c<35.5){
				AQI=Linear(100,51,35.4,15.5,c); 
			} 
			else if (c>=35.5 && c<65.5){
				AQI=Linear(150,101,65.4,35.5,c);
			}
			else if (c>=65.5 && c<150.5){
				AQI=Linear(200,151,150.4,65.5,c);
			 }
			 else if (c>=150.5 && c<250.5){
				AQI=Linear(300,201,250.4,150.5,c); 
			} 
			else if (c>=250.5 && c<350.5){ 
				AQI=Linear(400,301,350.4,250.5,c);
			}
			else if (c>=350.5 && c<500.5){
				AQI=Linear(500,401,500.4,350.5,c); 
			} 
			else{
				AQI="Out of Range";
			 }
			 
			return AQI;
		}
		
		
	} else {
		alert("Sorry, your browser cannot handle the true power of Google Maps");
	}	//-->
	</script>

</body>

</html>




 